<template>
	<div class="cmp-myTest">
		<div class="cont-title">
			我的竞赛
		</div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="全部" name="0"></el-tab-pane>

			<!-- <el-tab-pane label="已报名" name="2"></el-tab-pane> -->
			<el-tab-pane label="进行中" name="1"></el-tab-pane>
			<el-tab-pane label="即将开始" name="2"></el-tab-pane>
			<el-tab-pane label="已结束" name="3"></el-tab-pane>
		</el-tabs>
		<div class="test-list" v-if="list.length != 0">
			<div class="test-item"
				:class="{'bgYellow': item.showUserState == 2, 'bgBlue': item.state == 1, 'bgGrey': item.state == 3}"
				v-for="item in list">
				<div class="test-title" :title="item.title">{{item.title}}</div>
				<div class="test-type">开始时间:{{item.startTime}}</div>
				<div class="test-type">结束时间:{{item.endTime}}</div>
				<div class="test-type">{{item.state | formatStatus}}</div>
				<div class="test-btn" @click="goExam(item)">{{item.showUserState | formatBtn}}</div>
			</div>
		</div>
		<div class="no-data" v-else>
			<el-empty description="暂无竞赛"></el-empty>
		</div>
		<div class="page-cont">
			<el-pagination :page-size="pageSize" :hide-on-single-page="true" background layout="prev, pager, next"
				:total="total" @current-change="pageNumChange">
			</el-pagination>
		</div>
		<!-- <div class="cont-title">
      大家都在考
    </div>
    <div class="people-test">
      <div class="people-test-item" v-for="item in 6">
        <div class="people-info">
          <div class="people-avatar">
            <img src="../assets/img/avanar.jpeg" alt="">
          </div>
          <div class="people-test-info">
            <div class="people-phone">131111111</div>
            <div class="people-querstion">
              <div class="time-tag">
                <div class="tag-icon">
                  <img src="../assets/img/question_icon1.png" alt="">
                </div>
                <span>共80道</span>
              </div>
              <div class="time-tag">
                <div class="tag-icon">
                  <img src="../assets/img/question_icon2.png" alt="">
                </div>
                <span>共80道</span>
              </div>
            </div>
          </div>
        </div>
        <div class="test-time">最近考试时间: 2021-09-06 10:18:01</div>
        <div class="test-time">考点练习2021-09-06 10:18:01</div>
        <div class="people-btn">超越TA</div>
      </div>
    </div> -->
	</div>
</template>
<script>
	import {
		getMyCompListApi,
		startTestApi,
		getTestDetailsApi,
		getTestQuestionApi,
		upLoadAnswerApi,
		upLoadTestApi,
		entryTestApi
	} from '@/api/Test'
	export default {
		data() {
			return {
				activeName: '0',
				list: [],
				pageNum: 1,
				pageSize: 10,
				total: 0
			}
		},
		created() {
			this.getMyTest()
		},
		filters: {
			formatTxt(index) {
				// showUserState 1可报名 2已报名 3可以考试 4考试完成
				let obj = {
					1: '正在报名中...',
					2: '考试等待中...',
					3: '在在进行中...',
					4: '考试已结束...',
				}
				return obj[index]
			},
			formatStatus(status) {
				let obj = {
					1: '进行中',
					2: '即将开始',
					3: '已结束'
				}
				return obj[status]
			},
			formatBtn(index) {
				// showUserState 1可报名 2已报名 3可以考试 4考试完成
				let obj = {
					1: '去报名',
					2: '已报名',
					3: '立即参加',
					4: '考试完成',
				}
				return obj[index]
			},
		},
		methods: {
			goExam(item) {
				if (item.showUserState == 1) {
					entryTestApi({
						competitionID: item.recId
					}).then(res => {
						if (res.code == 200) {
							this.$message({
								message: '报名成功',
								type: 'success'
							})
						}
					})
				} else if (item.showUserState == 3) {
					startTestApi({
						competitionId: item.recId
					}).then(res => {
						if (res.code == 200) {
							this.$emit('userexamId', res.userexamId)
						}
					})
				}

			},
			getMyTest() {
				getMyCompListApi({
					// status: 0,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					status: this.activeName
				}).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},
			handleClick(tab, event) {
				this.pageNum = 1
				this.getMyTest()
			},
			pageNumChange(index) {
				this.pageNum = index
				this.getMyTest()
			},
		}

	}
</script>
<style lang="less" scoped>
	.cmp-myTest {
		padding: 0 58px;

		.cont-title {
			padding: 30px 0 15px;
			border-bottom: 1px solid rgba(151, 151, 151, 0.2);
			font-size: 16px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 22px;
		}

		::v-deep .el-tabs__nav-wrap::after {
			background-color: rgba(0, 0, 0, 0);
		}

		::v-deep .el-tabs__header {
			margin: 27px 0 34px;
			padding: 0 10px;
			// width: 300px;
		}

		::v-deep .el-tabs__active-bar {
			background-color: #2360FE;
			// width: 20px !important;
			// margin-left: 10%;
			// margin: 0 10%;
			height: 4px;
		}

		::v-deep .el-tabs__nav {
			padding-bottom: 8px;
		}

		::v-deep .el-tabs__item.is-active {
			color: #2360FE;
		}

		.test-list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		.no-data {
			width: 100%;
			height: 300px;
			display: flex;
			justify-content: center;
		}

		.test-item {
			width: 295px;
			// height: 161px;
			background-color: #F4F8FF;
			border-radius: 11px;
			margin-bottom: 20px;
			padding: 17px 20px;

			&:not(:nth-of-type(3n)) {
				margin-right: 18px;
			}

			&:hover {
				background: #F4F8FF linear-gradient(180deg, #4162FF 0%, #35CCFF 100%);

				.test-title {
					color: #fff;
				}

				.test-type {
					color: #fff;
				}

				.test-btn {
					background-color: #FE7C3E;
				}
			}
		}

		.bgGreen {
			background-color: rgba(225, 243, 216, 0.9);
		}

		.bgYellow {
			background-color: rgba(250, 236, 216, 0.9);
		}

		.bgBlue {
			background-color: rgba(140, 197, 255, 0.9);
		}

		.bgGrey {
			background-color: rgba(233, 233, 235, 0.9);
		}

		.test-title {
			margin-bottom: 16px;
			font-size: 23px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #333333;
			line-height: 31px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.test-type {
			// height: 37px;
			padding-bottom: 12px;
			font-size: 13px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #666666;
		}

		.test-btn {
			width: 87px;
			height: 33px;
			background: #0A8CFF;
			border-radius: 4px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #FFFFFF;
			cursor: pointer;
		}

		.people-test {
			display: flex;
			flex-wrap: wrap;
		}

		.people-test-item {
			position: relative;
			width: 295px;
			height: 144px;
			background: #F9F9F9;
			border-radius: 11px;
			margin-bottom: 36px;
			padding: 15px;

			&:not(:nth-of-type(3n)) {
				margin-right: 18px;
			}

			.people-info {
				display: flex;
				align-items: center;
				margin-bottom: 17px;
			}

			.people-avatar {
				margin-right: 13px;
				width: 47px;
				height: 47px;
				border-radius: 47px;
				overflow: hidden;
			}

			.people-test-info {
				flex: 1;
			}

			.people-phone {
				font-size: 14px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #666666;
				line-height: 20px;
			}

			.people-querstion {
				display: flex;
				align-items: center;
				font-size: 12px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #666666;
				line-height: 17px;
			}

			.time-tag {
				display: flex;
				align-items: center;
				margin-right: 18px;
			}

			.tag-icon {
				width: 16px;
				height: 16px;
				margin-right: 4px;
			}

			.test-time {
				font-size: 12px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #666666;
				line-height: 18px;
			}

			.people-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -16px;
				width: 87px;
				height: 33px;
				background: #0A8CFF;
				border-radius: 16px;
				font-size: 15px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>